<template>
  <div>
    <van-nav-bar title="添加信用卡">
      <img
        src="~assets/image/arrow_left.png"
        alt=""
        slot="left"
        width="20"
        height="20"
        @click="leftClick"
      />
    </van-nav-bar>
    <div class="addCred">
      <van-cell-group>
        <van-field
          label="持卡人"
          :value="realname"
          readonly
          label-align="right"
          label-width="80px"
        />
        <van-field
          label-align="right"
          label-width="80px"
          v-model="credId"
          type="digit"
          label="银行卡号"
          placeholder="请输入您的信用卡号"
        />
        <van-field
          v-model="phone"
          type="tel"
          label="预留手机"
          label-align="right"
          label-width="80px"
          placeholder="请输入您的预留手机号"
        />
        <van-field
          v-model="credPwd"
          type="digit"
          label="安全码"
          label-align="right"
          label-width="80px"
          placeholder="信用卡背面CVN2后三位数字"
        />
        <van-field
          v-model="termOfValidity"
          type="text"
          label="有效期"
          label-align="right"
          label-width="80px"
          placeholder="请输入信用卡有效期 如:09/22"
        />
        <!-- <van-field
          v-model="billDay"
          type="digit"
          label="账单日"
          placeholder="请选择信用卡账单日"
          @click="billDayClick()"
        /> -->

        <van-field
          readonly
          clickable
          label-align="right"
          label-width="80px"
          label="账单日"
          :value="billDay"
          placeholder="请选择信用卡账单日"
          @click="showPicker = true"
        />
        <van-field
          readonly
          clickable
          label-align="right"
          label-width="80px"
          label="还款日"
          :value="repaymentDate"
          placeholder="请选择信用卡还款日"
          @click="showPicker1 = true"
        />

        <van-field
          v-model="quota"
          label-align="right"
          label-width="80px"
          type="number"
          label="额度"
          placeholder="请输入您的信用卡额度"
        />
      </van-cell-group>
    </div>
    <p class="ti">温馨提示:同一张卡每天只能绑定五次,如失败请第二天再试</p>
    <p class="next" @click="next">绑定</p>

    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        title="选择日期"
        show-toolbar
        :default-index="0"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
    <van-popup v-model="showPicker1" round position="bottom">
      <van-picker
        title="选择日期"
        show-toolbar
        :default-index="0"
        :columns="columns"
        @confirm="onConfirm1"
        @cancel="onCancel1"
      />
    </van-popup>
  </div>
</template>
<script>
import {
  queryCertificationInfoApi,
  queryExecuteAddBankCardApi,
} from "network/ApiServe.js";
export default {
  name: "AddCreditCard",
  created() {
    this.token = localStorage.getItem("token");
  },
  data() {
    return {
      columns: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
        "31",
      ],
      value: "",
      showPicker: false,
      showPicker1: false,
      credId: "",
      phone: "",
      credPwd: "",
      termOfValidity: "",
      billDay: "",
      repaymentDate: "",
      quota: "",
      realname: "",
      idcard: "",
    };
  },
  mounted() {
    this.getCertificationInfo();
  },
  methods: {
    leftClick() {
      this.$router.back(-1);
    },
    onConfirm(value, index) {
      this.showPicker = !this.showPicker;
      this.billDay = value;
    },
    onCancel() {
      this.showPicker = !this.showPicker;
    },
    onConfirm1(value, index) {
      this.showPicker1 = !this.showPicker1;
      this.repaymentDate = value;
    },
    onCancel1() {
      this.showPicker1 = !this.showPicker1;
    },
    //查詢身份證
    getCertificationInfo() {
      queryCertificationInfoApi(this.token)
        .then((res) => {
          //console.log("getCertificationInfo", res);
          if (res.resp_code == "000000") {
            this.realname = res.result.realname;
            this.idcard = res.result.idcard;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // next
    next() {
      if (this.credId.length == 0) {
        this.$toast("请输入您的信用卡号");
        return;
      }
      if (this.phone.length == 0) {
        this.$toast("请输入您的预留手机号");
        return;
      }
      if (this.credPwd.length == 0) {
        this.$toast("信用卡背面CVN2后三位数字");
        return;
      }
      if (this.termOfValidity.length == 0) {
        this.$toast("请输入信用卡有效期");
        return;
      }
      if (this.billDay.length == 0) {
        this.$toast("请选择信用卡账单日");
        return;
      }
      if (this.repaymentDate.length == 0) {
        this.$toast("请选择信用卡还款日");
        return;
      }
      if (this.quota.length == 0) {
        this.$toast("请输入您的信用卡额度");
        return;
      }
      queryExecuteAddBankCardApi(
        this.token,
        this.realname,
        this.credId,
        this.idcard,
        this.phone,
        0, //0 信用卡 2 储蓄卡
        this.credPwd,
        this.termOfValidity,
        this.billDay,
        this.repaymentDate,
        this.quota,
        "",
        ""
      )
        .then((res) => {
          if (res.resp_code == "000000") {
            this.$toast(res.resp_message);
            this.$router.back(-1);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style >
.van-cell__value {
  position: relative;
  overflow: hidden;
  color: #969799;
  text-align: right;
  vertical-align: middle;
  word-wrap: break-word;
  margin-left: 4px;
}
</style>
<style scoped>
.addCred {
  background-color: #fff;
  font-size: 15px;
  color: #444;
  padding-left: 15px;
  padding-right: 15px;
}
p.ti {
  font-size: 0.37333rem;
  color: #444;
  margin-top: 20px;
  margin-left: 50px;
  margin-right: 50px;
  line-height: 20px;
  text-align: center;
}
.next {
  color: #fff;
  background-color: #121212;
  width: 94%;
  justify-content: space-around;
  margin: 20px auto;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 16px;
  border-radius: 8px;
}
</style>